/*----------------------------------------------------------------------*/
/* Set some Standards
/* This file not required! It just demonstrate how you can define
/* standards in one configuration file
/*----------------------------------------------------------------------*/

var config = {
    tooltip :{
        gravity: 'nw',
        fade: true,
        opacity: 1,
        offset: 0
    }
};

//wrap them because of some jQuery Elements
$(document).ready(function() {


   

    if($.fn.wl_Widget) $.fn.wl_Widget.defaults = {
        collapsed: false,
        load: null,
        reload: false,
        removeContent: true,
        collapsible: true,
        sortable: true,
        text: {
            loading: 'loading...',
            reload: 'reload',
            collapse: 'collapse widget',
            expand: 'expand widget'
        },
        onDrag: function () {},
        onDrop: function () {},
        onExpand: function () {},
        onCollapse: function () {}
    };



});
$(document).ready(function() {


    //for Caching
    var $content = $('#content');

    /*----------------------------------------------------------------------*/
    /* preload images
    /*----------------------------------------------------------------------*/

    //$.preload();

    /*----------------------------------------------------------------------*/
    /* Widgets
    /*----------------------------------------------------------------------*/

    $content.find('div.widgets').wl_Widget();
    
    /*----------------------------------------------------------------------*/
    /* All Form Plugins
    /*----------------------------------------------------------------------*/


    //Validation
    $content.find('input[data-regex]').wl_Valid();
    $content.find('input[type=email]').wl_Mail();
    $content.find('input[type=url]').wl_URL();

    //File Upload
    $content.find('input[type=file]').wl_File();

    //Password and Color
    $content.find('input[type=password]').wl_Password();
    $content.find('input.color').wl_Color();

    //Sliders
    $content.find('div.slider').wl_Slider();

    //Multiselects
    $content.find('select[multiple]').wl_Multiselect();


    /*----------------------------------------------------------------------*/
    /* uniform plugin
    /*----------------------------------------------------------------------*/

    //$("select, textarea, input").not('input[type=submit], textarea.html, select[multiple]').uniform();


    /*----------------------------------------------------------------------*/
    /* Gallery
    /*----------------------------------------------------------------------*/

    $content.find('ul.gallery').wl_Gallery();


    /*----------------------------------------------------------------------*/
    /* Tipsy Tooltip
    /*----------------------------------------------------------------------*/


    $content.find('input[title]').tipsy({
        gravity: function(){return ($(this).data('tooltip-gravity') || config.tooltip.gravity); },
        fade: config.tooltip.fade,
        opacity: config.tooltip.opacity,
        color: config.tooltip.color,
        offset: config.tooltip.offset
    });


    /*----------------------------------------------------------------------*/
    /* Tabs
    /*----------------------------------------------------------------------*/

    $content.find('div.tab').tabs({
        fx: {
            opacity: 'toggle',
            duration: 'fast'
        }      
    });

    /*----------------------------------------------------------------------*/
    /* Navigation Stuff
    /*----------------------------------------------------------------------*/


    //Top Pageoptions
    $('#wl_config').click(function(){
        var $pageoptions = $('#pageoptions');
        if($pageoptions.height() < 200){
            $pageoptions.animate({'height':200});
            $(this).addClass('active');
        }else{
            $pageoptions.animate({'height':20});
            $(this).removeClass('active');
        }
        return false;
    });


    //Header navigation for smaller screens
    var $headernav = $('ul#headernav');

    $headernav.bind('click',function(){
        //if(window.innerWidth > 800) return false;
        var ul = $headernav.find('ul').eq(0);
        (ul.is(':hidden')) ? ul.addClass('shown') : ul.removeClass('shown');
    });

    $headernav.find('ul > li').bind('click',function(event){
        event.stopPropagation();
        var children = $(this).children('ul');

        if(children.length){
            (children.is(':hidden')) ? children.addClass('shown') : children.removeClass('shown');
            return false;
        }
    });

    //Search Field Stuff        
    var $searchform = $('#searchform'),
    $searchfield = $('#search');

    $searchfield
    .bind('focus.wl',function(){
        $searchfield.parent().animate({width: '150px'},100).select();
    })
    .bind('blur.wl',function(){
        $searchfield.parent().animate({width: '90px'},100);
    });

    $searchform
    .bind('submit.wl',function(){
        //do something on submit                
        var query = $searchfield.val();
    });


    //Main Navigation        
    var $nav = $('#nav');

    $nav.delegate('li','click.wl', function(event){
        var _this = $(this),
        _parent = _this.parent(),
        a = _parent.find('a');
        _parent.find('ul').slideUp('fast');
        a.removeClass('active');
        _this.find('ul:hidden').slideDown('fast');
        _this.find('a').eq(0).addClass('active');
        event.stopPropagation();
    });

    /*----------------------------------------------------------------------*/
    /* Helpers
    /*----------------------------------------------------------------------*/

    //placholder in inputs is not implemented well in all browsers, so we need to trick this        
    $("[placeholder]").bind('focus.placeholder',function() {
        var el = $(this);
        if (el.val() == el.attr("placeholder") && !el.data('uservalue')) {
            el.val("");
            el.removeClass("placeholder");
        }
    }).bind('blur.placeholder',function() {
        var el = $(this);
        if (el.val() == "" || el.val() == el.attr("placeholder") && !el.data('uservalue')) {
            el.addClass("placeholder");
            el.val(el.attr("placeholder"));
            el.data("uservalue",false);
        }else{

        }
    }).bind('keyup.placeholder',function() {
        var el = $(this);
        if (el.val() == "") {
            el.data("uservalue",false);
        }else{
            el.data("uservalue",true);
        }
    }).trigger('blur.placeholder');




    /*-----------------------------------------------------------------------------------------------------------------------------*/
    /*         Following code is for the Demonstration only!
    /*        Get inspired and use it further or just remove it!
    /*-----------------------------------------------------------------------------------------------------------------------------*/




    /*----------------------------------------------------------------------*/
    /* Callback for Slider
    /*----------------------------------------------------------------------*/
    $content.find('div.slider#slider_callback').wl_Slider({
        onSlide:function(value){
            $('#slider_callback_bar').width(value+'%').text(value);
        }                                                      
    });

    /*----------------------------------------------------------------------*/





});
